<template>
	<view class="content">
		<button style="position: relative;z-index: 2;" @click="onSend">父传子</button>
		<web-view :src="url" @message="handleMessage"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: 'http://192.168.1.103:3000/'
			}
		},
		onShow: function() {
			// #ifdef APP-PLUS
			// 设置web-view距离顶部的距离
			var height = 0; //定义动态的高度变量，如高度为定值，可以直接写
			uni.getSystemInfo({
				//成功获取的回调函数，返回值为系统信息
				success: sysinfo => {
					height = sysinfo.windowHeight - 50; //自行修改，自己需要的高度（底部tabbar高度）
				},
				complete: () => {}
			});
			var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
			setTimeout(function() {
				var wv = currentWebview.children()[0];
				wv.setStyle({
					// 设置web-view距离顶部的距离以及自己的高度，单位为px
					top: 200,
					height: height
				});
			}, 1000); //如页面初始化调用需要写延迟
			// #endif
		},
		methods: {
			/**
			 * 1、子传父（子界面需引入uni.webview.1.5.2.js）
			 * 父界面：使用 @message
			 * 子界面：使用 uni.postMessage（传值需放入 data 中）
			 * 需真机运行（数据线链接）
			 */
			handleMessage(res) {
				console.log(JSON.stringify(res))
				const {
					name,
					age
				} = res.detail.data[0]
				uni.showModal({
					title: '获取子级传的值',
					content: `获取到的值为：name：${name}，age：${age}`,
					showCancel: false,
					confirmText: '关闭弹出',
					success() {}
				})
			},
			/**
			 * 2、父传子
			 * 父界面：先获取当前web-view（this.$scope.$getAppWebview().children()[0]）,通过 evalJS("xxx({msg: '雷猴啊'})")
			 * 子界面：window.xxx  = (res) => {}
			 */
			onSend() {
				const vw = this.$scope.$getAppWebview().children()[0]
				vw.evalJS("sendParentData({msg: '雷猴啊'})")
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
